<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>

    <div th:include="/common/layui"></div>
    <div th:include="/common/jq"></div>

    <!--添加 layui 自己的 css js  支持加载-->
    <link href="/css/houtai/manage_base.css"	rel="stylesheet" />
    <script	src="/js/houtai/manage_base.js"></script>
    <!--添加 layui 自己的 css js  支持加载-->

</head>
<script>
    var table;
    layui.use(['laydate', 'laypage', 'layer', 'form', 'table', 'carousel',
        'upload', 'element'], function () {
        table = layui.table;
    });

    var global_ids;
    var global_ids_len;

    var w;//窗口的宽
    var h;//窗口的高


    function sub(id){
        w = 600;
        h = 500;
        checkWindow();
        //iframe层
        layer.open({
            type: 2,
            title: '图书借阅',
            shadeClose:false,
            shade: 0.8,
            area: [w+'px', h+'px'],
            content: '/houtai/bookborrow/add?id='+id//iframe的url
        });
    }
   /* function sub(id) {
        //询问框
        layer.confirm('您是否要借阅此书？', {
            btn: ['是', '取消'] //按钮
        }, function () {

            $.post("/admin/booksearch/borrow", {bookId: id}, function (result) {
                if (result.success) {
                    layer.closeAll();
                    layer.msg(result.msg);
                    reload_data();
                } else {
                    layer.closeAll();//关闭loading
                    layer.msg(result.msg);
                }
            }, 'json');

        }, function () {
            layer.closeAll();//关闭loading
        });
    }*/
    //子窗口调用 的  关闭窗口方法
    function closeDlg(msg){
        layer.closeAll();
        layer.msg(msg);
        reload_data();
    }

    //相当前刷新  重新加载
    function reload_data(){
        var q  = $("#q").val();
        var bookTypeId  = $("#bookTypeId").val();
        table.reload('table', {
            where: {q:q,bookTypeId:bookTypeId},page:{curr: 1}
        });
    }

</script>


<body style="padding-top: 3px;">

<!--<div class="layui-form" style="margin-bottom: 3px; ">
    <div class="layui-form layui-form-pane" >
        <div class="layui-form-item" >
            <label class="layui-form-label">模糊查询</label>
            <div class="layui-input-inline">
                <input type="text" id="q" onkeydown="if(event.keyCode==13) reload_data()" name="title"
                       lay-verify="title" autocomplete="off" placeholder="请输入书籍名称" class="layui-input">
            </div>
            <div class="layui-input-inline" >
                <a class="layui-btn" onclick="reload_data()">查询</a>
            </div>
        </div>
    </div>
</div>-->
<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <label class="layui-form-label">图书类型</label>
            <div class="layui-input-block">
                <select id="bookTypeId" >
                    <option value="-1"></option>
                   <option th:value="${bookType.id}"  th:text="${bookType.name}"  th:each="bookType: ${bookTypeList}"></option>
                </select>
            </div>
        </div>
        <label class="layui-form-label">图书名称</label>
        <div class="layui-input-inline">
            <input type="text" id="q" onkeydown="if(event.keyCode==13) reload_data()" name="title"
                   lay-verify="title" autocomplete="off" placeholder="请输入书籍名称" class="layui-input">
        </div>
        <div class="layui-input-inline" >
            <a class="layui-btn" onclick="reload_data()">查询</a>
        </div>
    </div>
</div>

    <table class="layui-hide" id="table" lay-filter="table"></table>

</body>

    <script type="text/html" id="table_bar">
        <div class="layui-btn-group">
            <a class="layui-btn layui-btn-xs" lay-event="sub">借阅此书</a>
        </div>
    </script>

    <script type="text/html" id="format_type">
        {{#  if(d.bookType){ }}
        {{d.bookType.name}}
        {{#  } else {  }}
        空白
        {{#  }   }}
    </script>
    <script>
        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel',
            'upload', 'element'], function () {
            var laydate = layui.laydate //日期
                , laypage = layui.laypage //分页
                , layer = layui.layer //弹层
                , table = layui.table //表格
                , carousel = layui.carousel //轮播
                , upload = layui.upload //上传
                , element = layui.element; //元素操作


            table.render({
                elem: '#table'
                , url: '/admin/book/list'
                , height: 'full-60'
                , totalRow: true
                , cols: [ [
                    {checkbox: true, fixed: true}
                   /* , {field: 'id', title: 'ID', width: 60, style: 'font-size: 12px;'}*/
                  /*  , {field: 'orderNo', title: '排序号', width: 60, style: 'font-size: 12px;'}
                    , {field: 'bianhao', title: '图书编号', width: 90, style: 'font-size: 12px;'}*/
                    , {field: 'name', title: '图书名称', width: '20%', style: 'font-size: 12px;'}
                    , {field: 'bookType', title: '图书类型', width: '15%', style: 'font-size: 12px;', templet: '#format_type'}
                    , {field: 'author', title: '作者', width: '15%', style: 'font-size: 12px;'}
                 /*   , {field: 'danjia', title: '单价', width: 90, style: 'font-size: 12px;'}
                    , {field: 'press', title: '出版社', width: 90, style: 'font-size: 12px;'}*/
                    , {field: 'num', title: '可借数量', width: '10%', style: 'font-size: 12px;'}


                  /*  , {field: 'createDateTime', title: '创建时间', width: 140, style: 'font-size: 12px;'}
                    , {field: 'updateDateTime', title: '修改时间', width: 140, style: 'font-size: 12px;'}*/

                    , {fixed: 'right', width: '15%', title: '操作', toolbar: '#table_bar'}
                ] ]
                , id: 'table'
                , page: true
                , limits: [10, 20, 30, 50],
                limit: 10
            });

            //监听工具条 table_bar
            table.on('tool(table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"

                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'add_send_list') {
                    //layer.msg('查看操作' + data.id);
                    add_send_list(data.id)
                } else if (layEvent === 'see') {
                    see(data.id);
                } else if (layEvent === 'edit') {
                    //layer.msg('编辑操作' + data.id);
                    edit(data.id);
                } else if (layEvent === 'sub') {
                    sub(data.id);
                } else if (layEvent === 'see_wxuser_info') {
                }

            });

        });
    </script>


</html>